<template>
    <div class="pedigree-tree">
        <div class="tree-container">
            <!-- 当前羊只（左侧） -->
            <div class="current-sheep">
                <div class="sheep-node current">{{ sheepData.EarNumber || 'myz03' }}</div>
            </div>
            
            <!-- 连接线到父母 -->
            <div class="main-connector">
                <div class="horizontal-line"></div>
                <div class="vertical-line">
                    <div class="branch-point top"></div>
                    <div class="branch-point bottom"></div>
                </div>
            </div>
            
            <!-- 父母层级 -->
            <div class="parents-level">
                <!-- 父系分支 -->
                <div class="parent-branch father-branch">
                    <div class="sheep-node father">{{ sheepData.FatherEarNumber || 'gyz08' }}</div>
                    
                    <!-- 父系祖父母连接线 -->
                    <div class="parent-connector">
                        <div class="horizontal-line"></div>
                        <div class="vertical-line">
                            <div class="branch-point top"></div>
                            <div class="branch-point bottom"></div>
                        </div>
                    </div>
                    
                    <!-- 父系祖父母 -->
                    <div class="grandparents-level">
                        <div class="grandparent-branch">
                            <div class="sheep-node grandfather">{{ sheepData.PatGrandFatherEarNumber || '无' }}</div>
                            
                            <!-- 曾祖父母连接线 -->
                            <div class="grandparent-connector">
                                <div class="horizontal-line"></div>
                                <div class="vertical-line">
                                    <div class="branch-point top"></div>
                                    <div class="branch-point bottom"></div>
                                </div>
                            </div>
                            
                            <!-- 曾祖父母 -->
                            <div class="great-grandparents">
                                <div class="sheep-node great-grandfather">无</div>
                                <div class="sheep-node great-grandmother">无</div>
                            </div>
                        </div>
                        
                        <div class="grandparent-branch">
                            <div class="sheep-node grandmother">{{ sheepData.PatGrandMotherEarNumber || '无' }}</div>
                            
                            <!-- 曾祖父母连接线 -->
                            <div class="grandparent-connector">
                                <div class="horizontal-line"></div>
                                <div class="vertical-line">
                                    <div class="branch-point top"></div>
                                    <div class="branch-point bottom"></div>
                                </div>
                            </div>
                            
                            <!-- 曾祖父母 -->
                            <div class="great-grandparents">
                                <div class="sheep-node great-grandfather">无</div>
                                <div class="sheep-node great-grandmother">无</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 母系分支 -->
                <div class="parent-branch mother-branch">
                    <div class="sheep-node mother">{{ sheepData.MotherEarNumber || 'NX009' }}</div>
                    
                    <!-- 母系祖父母连接线 -->
                    <div class="parent-connector">
                        <div class="horizontal-line"></div>
                        <div class="vertical-line">
                            <div class="branch-point top"></div>
                            <div class="branch-point bottom"></div>
                        </div>
                    </div>
                    
                    <!-- 母系祖父母 -->
                    <div class="grandparents-level">
                        <div class="grandparent-branch">
                            <div class="sheep-node grandfather">{{ sheepData.MatGrandFatherEarNumber || '无' }}</div>
                            
                            <!-- 曾祖父母连接线 -->
                            <div class="grandparent-connector">
                                <div class="horizontal-line"></div>
                                <div class="vertical-line">
                                    <div class="branch-point top"></div>
                                    <div class="branch-point bottom"></div>
                                </div>
                            </div>
                            
                            <!-- 曾祖父母 -->
                            <div class="great-grandparents">
                                <div class="sheep-node great-grandfather">无</div>
                                <div class="sheep-node great-grandmother">无</div>
                            </div>
                        </div>
                        
                        <div class="grandparent-branch">
                            <div class="sheep-node grandmother">{{ sheepData.MatGrandMotherEarNumber || '无' }}</div>
                            
                            <!-- 曾祖父母连接线 -->
                            <div class="grandparent-connector">
                                <div class="horizontal-line"></div>
                                <div class="vertical-line">
                                    <div class="branch-point top"></div>
                                    <div class="branch-point bottom"></div>
                                </div>
                            </div>
                            
                            <!-- 曾祖父母 -->
                            <div class="great-grandparents">
                                <div class="sheep-node great-grandfather">无</div>
                                <div class="sheep-node great-grandmother">无</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
defineProps<{
    sheepData: any
}>()
</script>

<style scoped>
.pedigree-tree {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    min-height: 500px;
    padding: 40px 20px;
    background: #fafafa;
    overflow-x: auto;
    width: 100%;
}

.tree-container {
    display: flex;
    align-items: center;
    position: relative;
    min-width: 1400px;
    width: 100%;
    padding-left: 50px; /* 给左边留出足够空间 */
}

/* 当前羊只样式 */
.current-sheep {
    display: flex;
    align-items: center;
    z-index: 10;
    flex-shrink: 0; /* 防止被压缩 */
}

/* 羊只节点基础样式 */
.sheep-node {
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 500;
    text-align: center;
    min-width: 90px;
    font-size: 14px;
    white-space: nowrap;
    position: relative;
    z-index: 5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 当前羊只样式 */
.current {
    background: #409EFF;
    color: white;
    font-size: 16px;
    font-weight: bold;
    min-width: 120px;
    padding: 12px 24px;
    border-radius: 30px;
}

/* 父系样式（蓝色） */
.father {
    background: #409EFF;
    color: white;
    min-width: 100px;
}

/* 母系样式（红色） */
.mother {
    background: #F56C6C;
    color: white;
    min-width: 100px;
}

/* 祖父母样式 */
.grandfather {
    background: #909399;
    color: white;
    font-size: 13px;
    min-width: 80px;
}

.grandmother {
    background: #F56C6C;
    color: white;
    font-size: 13px;
    min-width: 80px;
}

/* 曾祖父母样式 */
.great-grandfather {
    background: #909399;
    color: white;
    font-size: 12px;
    padding: 8px 16px;
    min-width: 70px;
}

.great-grandmother {
    background: #F56C6C;
    color: white;
    font-size: 12px;
    padding: 8px 16px;
    min-width: 70px;
}

/* 主连接线（从当前羊只到父母） */
.main-connector {
    display: flex;
    align-items: center;
    margin: 0 30px;
    flex-shrink: 0;
}

.main-connector .horizontal-line {
    width: 50px;
    height: 2px;
    background: #333;
}

.main-connector .vertical-line {
    width: 2px;
    height: 140px;
    background: #333;
    position: relative;
}

/* 父母层级布局 */
.parents-level {
    display: flex;
    flex-direction: column;
    gap: 50px;
    flex-shrink: 0;
}

.parent-branch {
    display: flex;
    align-items: center;
    gap: 25px;
}

/* 父母到祖父母的连接线 */
.parent-connector {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.parent-connector .horizontal-line {
    width: 40px;
    height: 2px;
    background: #333;
}

.parent-connector .vertical-line {
    width: 2px;
    height: 90px;
    background: #333;
    position: relative;
}

/* 祖父母层级 */
.grandparents-level {
    display: flex;
    flex-direction: column;
    gap: 25px;
    flex-shrink: 0;
}

.grandparent-branch {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* 祖父母到曾祖父母的连接线 */
.grandparent-connector {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.grandparent-connector .horizontal-line {
    width: 30px;
    height: 2px;
    background: #333;
}

.grandparent-connector .vertical-line {
    width: 2px;
    height: 70px;
    background: #333;
    position: relative;
}

/* 曾祖父母层级 */
.great-grandparents {
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex-shrink: 0;
}

/* 分支点样式 */
.branch-point {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #333;
    border-radius: 50%;
    left: -3px;
}

.branch-point.top {
    top: 25%;
}

.branch-point.bottom {
    bottom: 25%;
}

/* 连接线到分支点的横线 */
.branch-point::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 2px;
    width: 25px;
    height: 2px;
    background: #333;
}

/* 响应式设计 */
@media (max-width: 1600px) {
    .tree-container {
        min-width: 1200px;
        padding-left: 30px;
    }
    
    .sheep-node {
        min-width: 80px;
        font-size: 13px;
        padding: 8px 16px;
    }
    
    .current {
        min-width: 100px;
        padding: 10px 20px;
        font-size: 15px;
    }
}

@media (max-width: 1400px) {
    .tree-container {
        min-width: 1000px;
        padding-left: 20px;
    }
    
    .main-connector .horizontal-line {
        width: 40px;
    }
    
    .parent-connector .horizontal-line {
        width: 30px;
    }
    
    .grandparent-connector .horizontal-line {
        width: 25px;
    }
}

@media (max-width: 1200px) {
    .pedigree-tree {
        padding: 20px 10px;
    }
    
    .tree-container {
        padding-left: 15px;
    }
    
    .parents-level {
        gap: 40px;
    }
    
    .grandparents-level {
        gap: 20px;
    }
}
</style>


